<ion-header no-border>
  <ion-navbar>
  </ion-navbar>
</ion-header>

<ion-content no-bounce>
  <div class="bitpayCard-header" [class.bitpayCard-header--new]="cardExperimentEnabled">
    <div class="bitpayCard-img">
      <img src="assets/img/bitpay-card/bitpay-card-mc-angled.svg" />
    </div>
  </div>
  <div class="bitpayCard-content">
    <div>
      <div class="title">
        <span translate>Fund it. Spend it.</span>
        <br>
        <span translate>Live on crypto.</span>
      </div>
      <p translate>The fastest, easiest way to turn your crypto into dollars for shopping. Load funds in the BitPay App and spend in minutes.</p>
    </div>

    <div>
      <div class="bitpayCard-item">
        <div class="bitpayCard-item-header">
          <img src="assets/img/bitpay-card/bitpay-card-intro-1.svg" />
          <div class="bitpayCard-item-title" translate>Instant Reloads*</div>
        </div>
        <p>
        <span translate>Reload your balance with no conversion fees* and spend.</span>
        Powered by our competitive <a (click)="openExchangeRates()">exchange rates</a>
        </p>
      </div>
      <div class="bitpayCard-item">
        <div class="bitpayCard-item-header">
          <img src="assets/img/bitpay-card/bitpay-card-intro-2.svg" />
          <div class="bitpayCard-item-title" translate>Flexibility</div>
        </div>
        <p translate>Designed for people who want to live life on crypto. View your balance, request a new PIN, and reload instantly all within the BitPay App.</p>
      </div>
      <div class="bitpayCard-item">
        <div class="bitpayCard-item-header">
          <img src="assets/img/bitpay-card/bitpay-card-intro-3.svg" />
          <div class="bitpayCard-item-title" translate>Enhanced Security</div>
        </div>
        <p translate>Includes EMV chip and options to lock your card and control how you spend.</p>
      </div>
      <div class="bitpayCard-item">
        <div class="bitpayCard-item-header">
          <img src="assets/img/bitpay-card/bitpay-card-intro-4.svg" />
          <div class="bitpayCard-item-title" translate>Worldwide</div>
        </div>
        <p translate>Ready to use in millions of locations around the world. Pay with contactless, PIN or simply withdraw cash from any compatible ATM.</p>
      </div>
      <div class="bitpayCard__agreement">
        *Network fees and miner fees may apply.<br><br>
        BY USING THIS CARD YOU AGREE WITH THE TERMS AND CONDITIONS OF THE CARDHOLDER AGREEMENT AND FEE SCHEDULE, IF ANY. This card is issued by Metropolitan Commercial Bank (Member FDIC) pursuant to a license from Mastercard International Incorporated. “Metropolitan Commercial Bank” and “Metropolitan” are registered trademarks of Metropolitan Commercial Bank ©2014.<br><br>
        Mastercard is a registered trademark, and the circles design is a trademark of Mastercard International Incorporated.
      </div>

    </div>
  </div>
</ion-content>

  <ion-footer *ngIf="ready">
    <ion-toolbar>

      <ng-container *ngIf="bitPayIdConnected else notConnected">
        <button ion-button class="button-standard button-primary" (click)="orderBitPayCard('login')">
          {{'Sign Up' | translate}}
        </button>
      </ng-container>

      <ng-template #notConnected>
        <button ion-button class="button-standard button-primary" (click)="orderBitPayCard('createAccount')">
          {{'Sign Up' | translate}}
        </button>
        <div class="bitpayCard__link-button" (click)="orderBitPayCard('login')">
          {{'I already have an account' | translate}}
        </div>
      </ng-template>

    </ion-toolbar>
  </ion-footer>
